<template>
  <div class="login">
    <div :style="{background:'url('+url+')',backgroundSize:'100% 100%'}" class="background">
      <img alt="Logo" class="logo" src="@/assets/img/cetc-indexs.png"/>
      <div class="login-card">
        <a-row>
          <a-col :span="5" class='cardAcol'>
            <h1>运维控制平台</h1>
            <login-form></login-form>
          </a-col>
        </a-row>
      </div>
      <footer class='copyright'>Copyright © 中国电子科技集团公司第三十二研究所，All Rights Reserved.</footer>
    </div>
  </div>
</template>


<script>
  import loginForm from './components/loginForm'

  export default {
    name: 'Login',
    components: {
      loginForm: loginForm
    },
    data() {
      return {
        url: require('@/assets/img/background.svg')
      }
    },
  }
</script>


<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .login {
    height: 100vh;
    background: #f0f2f5;
    text-align: center;
  }

  .logo {
    width: 16vw;
    margin-top: 15vh;
    margin-bottom: 5vh
  }

  .background {
    height: 100vh
  }

  /*login card*/
  .login-card {
    position: relative;
    height: 46%;
    min-height: 340px;
  }

  .login-card > .ant-row {
    height: 100%;
  }

  .cardAcol {
    height: 100%;
    background-color: white;
    box-shadow: 0px 1px 6px #c75858;
    margin-left: 39.6%;
  }

  .cardAcol h1 {
    font-size: 20px;
    color: rgb(153, 51, 51);
    font-weight: bold;
    text-shadow: 1px 1px 1px rgb(114, 110, 110);
    position: absolute;
    left: 50%;
    top: 20%;
    transform: translate(-50%, -20%);
    width: 300px;
    text-align: center;
  }

  .cardAcol form {
    position: absolute;
    top: 40%;
    left: 15%;
    width: 70%;
  }

  /*版权*/
  .copyright {
    color: #ccc;
    position: absolute;
    bottom: 20px;
    width: 100vw
  }
</style>
